<template>
	<div class="control-wrapper">
		<div class="wrapper-header">
			<div class="title">
				<LingGan width="1.5rem" height="1.5rem"></LingGan>
				<span>机械革命电竞控制台</span>
			</div>
			<div class="search">
				<Input prefix="ios-search" placeholder="输入内容搜索" />
			</div>
		</div>
		<div class="wrapper-content">
			<div class="menu-list">
				<div class="menu-item" v-for="item in menuList" :key="item.id" @click="$router.push({ path: item.path })">
					<LingGan width="2rem" height="2rem" style="margin-right: 1.5rem"></LingGan>
					<div>
						<h4>{{ item.title }}</h4>
						<p>{{ item.desc }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import LingGan from '@/components/svg/linggan.vue'

export default {
	components: {
		LingGan
	},

	data() {
		return {
			menuList: [
				{ id: 11, icon: '', path: '/control/normal', title: '常规设置', desc: '快速切换、Windows设备、独显直连' },
				{ id: 22, icon: '', path: '/control/property', title: '性能', desc: '模式选择、自定义模式、水冷系统' },
				{ id: 33, icon: '', path: '/control/lighting', title: '灯光设置', desc: '键盘灯光、尾气特效' },
				{ id: 44, icon: '', path: '/control/battery', title: '电池', desc: '电池健康、电池状态' },
				{ id: 55, icon: '', path: '/control/screen', title: '显示设置', desc: '显示功能、色彩校正' },
				{ id: 66, icon: '', path: '/control/device', title: '设备信息', desc: '系统信息、系统监控、关于' }
			]
		}
	},

	methods: {}
}
</script>

<style lang="less" scoped>
.control-wrapper {
	background: var(--bg-color);
	padding: 2.5rem 3rem;

	.wrapper-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			padding-top: 4.17rem;
			span {
				margin-left: 1rem;
				font-family: PingFangSC-Regular;
				font-size: 1.33rem;
				color: var(--text-color);
				font-weight: 600;
			}
		}
		.search {
			margin-top: 2rem;
			width: 35%;
		}
	}

	.wrapper-content {
		margin-top: 4rem;
		.menu-list {
			display: flex;
			flex-wrap: wrap;
			.menu-item {
				display: flex;
				align-items: center;
				width: 22rem;
				background: #efefef;
				border-radius: 0.8rem;
				padding: 1.5rem 1rem;
				margin: 3rem 2rem;
				cursor: pointer;
				h4 {
					color: #ff8e0c;
				}
				p {
					font-size: 1rem;
					color: var(--text-color);
					margin-top: 1rem;
				}
			}
		}
	}
}
</style>
